<template>
    <el-tabs class="product-log-content" v-model="activeName" @tab-change="handleTabsChange">
        <!-- 更新日志 -->
        <el-tab-pane label="更新日志" name="update">
            <div class="product-log-options">
                <el-input
                    v-model="searchUpdateValue"
                    placeholder="请输入更新日志关键字"
                    clearable
                    @clear="clearSearch"
                    @keydown.enter="searchUpdateLogEvent"
                />
            </div>
            <div class="product-log-list">
                <el-scrollbar :height="`cacl(100vh - 280px)`">
                    <el-descriptions title="客户产品更新列表" :column="3" size="large" border>
                        <div v-for="(item, index) in data" :key="index">
                            <!-- 更新时间 -->
                            <el-descriptions-item>
                                <template #label>
                                    <div class="flex items-center">
                                        <el-icon class="el-icon--left">
                                            <Timer />
                                        </el-icon>
                                        更新时间
                                    </div>
                                </template>
                                {{ formatTimeZone(item.createdAt, 'YYYY-MM-DD HH:mm:ss') }}
                            </el-descriptions-item>
                            <!-- 客户名称 -->
                            <el-descriptions-item>
                                <template #label>
                                    <div class="flex items-center">
                                        <el-icon class="el-icon--left">
                                            <UserAvatar />
                                        </el-icon>
                                        客户名称
                                    </div>
                                </template>
                                {{ item.customerName }}
                            </el-descriptions-item>
                            <!-- 产品名称 -->
                            <el-descriptions-item>
                                <template #label>
                                    <div class="flex items-center">
                                        <el-icon class="el-icon--left">
                                            <Product />
                                        </el-icon>
                                        产品名称
                                    </div>
                                </template>
                                {{ item.logDetail.productName }}
                            </el-descriptions-item>
                            <!-- 更新内容 -->
                            <el-descriptions-item :span="3">
                                <template #label>
                                    <div class="flex items-center">
                                        <el-icon class="el-icon--left">
                                            <UpdateNow />
                                        </el-icon>
                                        更新内容
                                    </div>
                                </template>
                                <el-text type="primary">{{ item.logDetail.changeContent }}</el-text>
                            </el-descriptions-item>
                        </div>
                    </el-descriptions>
                </el-scrollbar>
            </div>
        </el-tab-pane>

        <!-- 增加日志 -->
        <el-tab-pane label="增加日志" name="create">
            <div class="product-log-options">
                <el-input
                    v-model="searchCreateValue"
                    placeholder="请输入新增日志关键字"
                    clearable
                    @clear="clearSearch"
                    @keydown.enter="searchCreateLogEvent"
                />
            </div>
            <div class="product-log-list">
                <el-scrollbar :height="`cacl(100vh - 280px)`">
                    <el-descriptions title="客户产品新增列表" :column="3" size="large" border>
                        <div v-for="(item, index) in data" :key="index">
                            <!-- 更新时间 -->
                            <el-descriptions-item>
                                <template #label>
                                    <div class="flex items-center">
                                        <el-icon class="el-icon--left">
                                            <Timer />
                                        </el-icon>
                                        更新时间
                                    </div>
                                </template>
                                {{ formatTimeZone(item.createdAt, 'YYYY-MM-DD HH:mm:ss') }}
                            </el-descriptions-item>
                            <!-- 客户名称 -->
                            <el-descriptions-item>
                                <template #label>
                                    <div class="flex items-center">
                                        <el-icon class="el-icon--left">
                                            <UserAvatar />
                                        </el-icon>
                                        客户名称
                                    </div>
                                </template>
                                {{ item.customerName }}
                            </el-descriptions-item>
                            <!-- 产品名称 -->
                            <el-descriptions-item>
                                <template #label>
                                    <div class="flex items-center">
                                        <el-icon class="el-icon--left">
                                            <Product />
                                        </el-icon>
                                        产品名称
                                    </div>
                                </template>
                                {{ item.logDetail.productName }}
                            </el-descriptions-item>
                            <!-- 更新内容 -->
                            <el-descriptions-item :span="3">
                                <template #label>
                                    <div class="flex items-center">
                                        <el-icon class="el-icon--left">
                                            <UpdateNow />
                                        </el-icon>
                                        更新内容
                                    </div>
                                </template>
                                <el-text type="primary">{{ item.logDetail.changeContent }}</el-text>
                            </el-descriptions-item>
                        </div>
                    </el-descriptions>
                </el-scrollbar>
            </div>
        </el-tab-pane>

        <!-- 删除日志 -->
        <el-tab-pane label="删除日志" name="delete">
            <div class="product-log-options">
                <el-input
                    v-model="searchDeleteValue"
                    placeholder="请输入删除日志关键字"
                    clearable
                    @clear="clearSearch"
                    @keydown.enter="searchDeleteLogEvent"
                />
            </div>
            <div class="product-log-list">
                <el-scrollbar :height="`cacl(100vh - 280px)`">
                    <el-descriptions title="客户产品删除列表" :column="3" size="large" border>
                        <div v-for="(item, index) in data" :key="index">
                            <!-- 更新时间 -->
                            <el-descriptions-item>
                                <template #label>
                                    <div class="flex items-center">
                                        <el-icon class="el-icon--left">
                                            <Timer />
                                        </el-icon>
                                        更新时间
                                    </div>
                                </template>
                                {{ formatTimeZone(item.createdAt, 'YYYY-MM-DD HH:mm:ss') }}
                            </el-descriptions-item>
                            <!-- 客户名称 -->
                            <el-descriptions-item>
                                <template #label>
                                    <div class="flex items-center">
                                        <el-icon class="el-icon--left">
                                            <UserAvatar />
                                        </el-icon>
                                        客户名称
                                    </div>
                                </template>
                                {{ item.customerName }}
                            </el-descriptions-item>
                            <!-- 产品名称 -->
                            <el-descriptions-item>
                                <template #label>
                                    <div class="flex items-center">
                                        <el-icon class="el-icon--left">
                                            <Product />
                                        </el-icon>
                                        产品名称
                                    </div>
                                </template>
                                {{ item.logDetail.productName }}
                            </el-descriptions-item>
                            <!-- 更新内容 -->
                            <el-descriptions-item :span="3">
                                <template #label>
                                    <div class="flex items-center">
                                        <el-icon class="el-icon--left">
                                            <UpdateNow />
                                        </el-icon>
                                        更新内容
                                    </div>
                                </template>
                                <el-text type="primary">{{ item.logDetail.changeContent }}</el-text>
                            </el-descriptions-item>
                        </div>
                    </el-descriptions>
                </el-scrollbar>
            </div>
        </el-tab-pane>
    </el-tabs>

    <!-- 分页 -->
    <div class="product-log-pagination">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            background
            layout="prev, pager, next, jumper, sizes, total"
            :page-sizes="[6, 12, 50, 100]"
            :total="total"
            @change="handlePageChange"
        />
    </div>
</template>

<script lang="ts" setup>
import { getProductLogList, searchProductLogList } from '@/api/productLog';
import { Timer, UserAvatar, Product, UpdateNow } from '@vicons/carbon';
import { formatTimeZone } from '@utils/calculate';

onMounted(() => {
    // 获取对应产品日志
    getProductLogListEvent();
});

/* ******************************通用属性/方法****************************** */

// 获取日志数据
const getProductLogListEvent = () => {
    // 重置数据
    data.length = 0;
    // 请求数据
    getProductLogList(activeName.value, currentPage.value, pageSize.value).then((res) => {
        total.value = res.total;
        res.data.forEach((item) => data.push(item));
    });
};

/* ******************************tabs相关属性/方法****************************** */
// tabs标签激活名称
const activeName = ref('update');
// 切换tabs事件
const handleTabsChange = () => {
    currentPage.value = 1;
    pageSize.value = 6;
    getProductLogListEvent();
};

// 更新日志搜索值
const searchUpdateValue = ref('');
// 搜索更新日志
const searchUpdateLogEvent = () => {
    if (searchUpdateValue.value == '') {
        getProductLogListEvent();
        return;
    }
    // 重置数据
    data.length = 0;
    // 请求数据
    searchProductLogList(activeName.value, searchUpdateValue.value, currentPage.value, pageSize.value).then((res) => {
        total.value = res.total;
        res.data.forEach((item) => data.push(item));
    });
};

// 创建日志搜索值
const searchCreateValue = ref('');
// 搜索创建日志
const searchCreateLogEvent = () => {
    if (searchCreateValue.value == '') {
        getProductLogListEvent();
        return;
    }
    // 重置数据
    data.length = 0;
    // 请求数据
    searchProductLogList(activeName.value, searchCreateValue.value, currentPage.value, pageSize.value).then((res) => {
        total.value = res.total;
        res.data.forEach((item) => data.push(item));
    });
};

// 删除日志搜索值
const searchDeleteValue = ref('');
// 搜索删除日志
const searchDeleteLogEvent = () => {
    if (searchDeleteValue.value == '') {
        getProductLogListEvent();
        return;
    }
    // 重置数据
    data.length = 0;
    // 请求数据
    searchProductLogList(activeName.value, searchDeleteValue.value, currentPage.value, pageSize.value).then((res) => {
        total.value = res.total;
        res.data.forEach((item) => data.push(item));
    });
};

// 清空搜索框
const clearSearch = () => {
    getProductLogListEvent();
};

/* ******************************描述列表相关属性/方法****************************** */
// 展示数据
const data = reactive<AjaxResponse['productLogList']>([]);

/* ******************************分页相关属性/方法****************************** */
// 当前页码
const currentPage = ref(1);
// 每页条数
const pageSize = ref(6);
// 总条数
const total = ref(0);
// 处理页码变动
const handlePageChange = () => {
    // 如果有搜索值，则重新搜索
    if (activeName.value == 'update' && searchUpdateValue.value) {
        searchUpdateLogEvent();
        return;
    }

    if (activeName.value == 'create' && searchCreateValue.value) {
        searchCreateLogEvent();
        return;
    }

    if (activeName.value == 'delete' && searchDeleteValue.value) {
        searchDeleteLogEvent();
        return;
    }

    // 没有搜索值，则重置数据
    getProductLogListEvent();
};
</script>

<style lang="scss" scoped>
.product-log-content {
    width: 100%;
    height: calc(100vh - 140px);

    .product-log-options {
        width: 100%;
        height: 60px;
    }

    .product-log-list {
        width: 100%;
        height: calc(100vh - 200px);
        overflow: hidden;
    }
}
.product-log-pagination {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
}
</style>
